diff options
Diffstat (limited to 'src/pages/my/transaction/[id].js')
| -rw-r--r-- | src/pages/my/transaction/[id].js | 127 |
1 files changed, 116 insertions, 11 deletions
diff --git a/src/pages/my/transaction/[id].js b/src/pages/my/transaction/[id].js index 428d71fb..d1ecbd7f 100644 --- a/src/pages/my/transaction/[id].js +++ b/src/pages/my/transaction/[id].js @@ -2,13 +2,12 @@ import AppBar from "@/components/layouts/AppBar"; import Layout from "@/components/layouts/Layout"; import LineDivider from "@/components/elements/LineDivider"; import WithAuth from "@/components/auth/WithAuth"; -import { useEffect, useState } from "react"; +import { useCallback, useEffect, useRef, useState } from "react"; import apiOdoo from "@/core/utils/apiOdoo"; import { useRouter } from "next/router"; import { useAuth } from "@/core/utils/auth"; import VariantCard from "@/components/variants/VariantCard"; import currencyFormat from "@/core/utils/currencyFormat"; -import Disclosure from "@/components/elements/Disclosure"; import DescriptionRow from "@/components/elements/DescriptionRow"; import { TransactionDetailAddress } from "@/components/transactions/TransactionDetail"; import { SkeletonList } from "@/components/elements/Skeleton"; @@ -16,6 +15,10 @@ import Link from "@/components/elements/Link"; import { ChevronRightIcon } from "@heroicons/react/24/outline"; import Alert from "@/components/elements/Alert"; import TransactionStatusBadge from "@/components/transactions/TransactionStatusBadge"; +import useConfirmAlert from "@/lib/elements/hooks/useConfirmAlert"; +import { toast } from "react-hot-toast"; +import useBottomPopup from "@/lib/elements/hooks/useBottomPopup"; +import getFileBase64 from "@/core/utils/getFileBase64"; export default function DetailTransaction() { const router = useRouter(); @@ -23,16 +26,94 @@ export default function DetailTransaction() { const [ auth ] = useAuth(); const [ transaction, setTransaction ] = useState(null); - useEffect(() => { + const loadTransaction = useCallback(async () => { if (auth && id) { - const loadTransaction = async () => { - const dataTransaction = await apiOdoo('GET', `/api/v1/partner/${auth?.partner_id}/sale_order/${id}`); - setTransaction(dataTransaction); - } - loadTransaction(); + const dataTransaction = await apiOdoo('GET', `/api/v1/partner/${auth?.partner_id}/sale_order/${id}`); + setTransaction(dataTransaction); } }, [ auth, id ]); + useEffect(() => { + loadTransaction(); + }, [ loadTransaction ]); + + const submitCancelTransaction = async (data) => { + const isCancelled = await apiOdoo('POST', `/api/v1/partner/${auth.partner_id}/sale_order/${data.id}/cancel`); + if (isCancelled) { + toast.success('Berhasil batalkan transaksi'); + loadTransaction(); + } + } + + const { + openConfirmAlert, + ConfirmAlert + } = useConfirmAlert({ + title: 'Batalkan Transaksi', + caption: 'Apakah anda yakin untuk membatalkan transaksi?', + closeText: 'Tidak', + submitText: 'Iya, batalkan', + onSubmit: submitCancelTransaction + }); + + const UploadPurchaseOrder = () => { + const nameRef = useRef(''); + const fileRef = useRef(''); + + const submitUploadPurchaseOrder = async (e) => { + e.preventDefault(); + const file = fileRef.current.files[0]; + const name = nameRef.current.value; + if (file.size > 5000000) { + toast.error('Maksimal ukuran file adalah 5MB', { + position: 'bottom-center' + }); + return; + } + const parameter = { + name, + file: await getFileBase64(file) + }; + const isUploaded = await apiOdoo('POST', `/api/v1/partner/${auth.partner_id}/sale_order/${transaction.id}/upload_po`, parameter); + if (isUploaded) { + toast.success('Berhasil upload PO'); + loadTransaction(); + closePopup(); + } + }; + + return ( + <form className="flex flex-col gap-y-4" onSubmit={submitUploadPurchaseOrder}> + <div> + <label className="form-label mb-2">Nama PO</label> + <input className="form-input" type="text" ref={nameRef} required /> + </div> + <div> + <label className="form-label mb-2">Dokumen PO</label> + <input className="form-input" type="file" ref={fileRef} required /> + </div> + <button type="submit" className="btn-yellow w-full mt-2">Upload</button> + </form> + ); + } + + const { + closePopup, + BottomPopup, + openPopup + } = useBottomPopup({ + title: 'Upload PO', + children: UploadPurchaseOrder + }); + + const downloadPurchaseOrder = () => { + + }; + + const uploadPurchaseOrder = () => { + openPopup(); + }; + return ( <WithAuth> <Layout className="pb-4"> @@ -49,9 +130,6 @@ export default function DetailTransaction() { <DescriptionRow label="No Transaksi"> { transaction?.name } </DescriptionRow> - <DescriptionRow label="Purchase Order"> - { transaction?.purchase_order_name || '-' } - </DescriptionRow> <DescriptionRow label="Ketentuan Pembayaran"> { transaction?.payment_term } </DescriptionRow> @@ -65,6 +143,24 @@ export default function DetailTransaction() { <LineDivider /> + <div className="p-4 flex flex-col gap-y-4"> + <DescriptionRow label="Purchase Order"> + { transaction?.purchase_order_name || '-' } + </DescriptionRow> + <div className="flex items-center"> + <p className="text-gray_r-11 leading-none">Dokumen PO</p> + <button + type="button" + className="btn-light py-1.5 px-3 ml-auto" + onClick={transaction?.purchase_order_file ? downloadPurchaseOrder : uploadPurchaseOrder} + > + { transaction?.purchase_order_file ? 'Download' : 'Upload' } + </button> + </div> + </div> + + <LineDivider /> + <p className="h2 p-4">Detail Produk</p> <div className="mt-2 p-4 pt-0 flex flex-col gap-y-3"> @@ -115,6 +211,13 @@ export default function DetailTransaction() { Belum ada Invoice </Alert> ) } + <button + className="btn-light w-full mt-4" + disabled={transaction?.status != 'waiting'} + onClick={() => openConfirmAlert(transaction)} + > + Batalkan Transaksi + </button> </div> </div> </> @@ -123,6 +226,8 @@ export default function DetailTransaction() { <SkeletonList number={12} /> </div> ) } + { ConfirmAlert } + { BottomPopup } </Layout> </WithAuth> ); |